用之前的篇幅，已經大概跟大家介紹完靜態網站的基本技巧，理論上要做出一個網站是沒有什麼問題了，BUT我們肯定是不會就此停下腳步的，錦上添花就是工程師的天命阿。所以這篇主要跟大家介紹一些，其實也不是很重要，但可以讓網站看起來更酷一點的小東西。
Bootstrap除了我們之前介紹的基本按鈕之外，也提供了很多其他比較複雜的元件模組讓我們使用，到官網文件的Component區就可以看到這些清單了。
這邊我們就拿Navigate bar做舉例，Navigate bar一般是一個在網頁上方，供使用者選取頁面或其他功能的一個欄位，像這樣。
至於使用方法，在點進去Component – Navbar的頁面後，就有一些簡單的物件介紹和模板程式碼，我的習慣是直接拿模板貼進來，再按照自己的需求去改，這裡我們稍微介紹一下這個Navbar模板程式碼有哪些可以修改的地方。
tw40210
<nav class="navbar navbar-expand-lg navbar-light bg-light">
//這裡是整個Navbar的板塊，可以調整他的大小和顏色
<a class="navbar-brand" href="#">Navbar</a>
//這是最左邊的按鈕，一般會把它超連結到首頁並換成自己的LOGO
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
//這一串應該是可以指定Navbar上的元素要怎麼呈現，可以是收起來然後游標移上去才展開之類的，但我沒有改過@@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
//這裡有各種類型的按鈕類型可以選，可以按自己的需求增減
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
//這裡是一個下滑式選單的物件，可以把需要的連結放進去，調整他是要預設收起來之類的
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
//這是一個網站內搜索的功能，但可能是比較複雜的網站才會用，我是沒有放
</div>
</nav>
除了使用Bootstrap提供的元件外，插入一些影片或是圖片更有可能是架設網站的主要目的，接下來就介紹一下怎麼搭配網格系統把這些元素好好地排版在我們的網站裡，以下是以Demo網站內怎麼擺放影片來做示範。
<div id="video_container">
//先用一個<div>當作放所有影片的板塊
<div class="container">
//接著有一個第一行的容器，我們需要三個”row”來分別擺放”標題”、影片跟”版本”
<div class="row">
<h4>Shape of you</h4>
</div>
<div class="row">
<div class="col-md-3">
//這裡因為希望同一行會有四個影片，所以我們用3個column當寬度
<video width="500" height="200" controls>
<source src="videos/Shapeofyou1.mp4" type="video/mp4">
</video>
//這裡是說明如何擺進影片，我們使用video標籤加入control屬性會讓影片有可以選擇進度的控制條，不然會只能雙擊開始或暫停。video標籤內含一個source標籤指定影片地址，還有不要忘記要指定影片的編碼類型
<p>Human-made accompaniment</p>
</div>
<div class="col-md-3">
<video width="500" height="200" controls>
<source src="videos/Shape of you 2.mp4" type="video/mp4">
</video>
<p>AI accompaniment</p>
</div>
<div class="col-md-3">
<video width="500" height="200" controls>
<source src="videos/Shape of you 3.mp4" type="video/mp4">
</video>
<p>Original accompaniment</p>
</div>
<div class="col-md-3">
<video width="500" height="200" controls>
<source src="videos/Shape of you 4.mp4" type="video/mp4">
</video>
<p>Pure vocal</p>
</div>
</div>
</div>
</div>
因為覺得拆成兩篇講有點水，就索性放在一起了XDDD
JavaScript是一種可以內嵌在HTML讓瀏覽器編譯的程式語言，大多數的語法我認為跟Python蠻類似的，但這裡就不多做敘述，如果有一點其他程式語言的基礎的話，我認為看懂JavaScript應該不困難，如果沒有其他程式語言的基礎的話… 那就順手學一個Python，不會很花時間的。
就像前面有提過的，只要使用script標籤就可以在HTML內直接執行JavaScript語句，但我們這裡不多作介紹，一方面是這很直觀，另一方面是除非你真的只寫幾行，不然這麼做會讓你的HTML文件很難閱讀。
接著，我們開始介紹要怎麼將JavaScript寫在另一個檔案內，供瀏覽器執行，並完成簡單的寄信功能。另外，本篇的程式主體源自這裡，作者還有另外講了其他小功能，有興趣的人可以看看。
首先，開一個.js的檔案
這邊我們另外開了一個頁面contact.html，把主頁的程式碼都貼過來，並把不需要的文字段落刪掉，之後在Navbar中設定跟主頁各有按鈕可以互相連結，以區分不同的功能頁面。
在body標籤的底部引入這個.js檔案，之所以不放在head內是因為HTML是一個順序編譯的語言，意思是他會把head內所有的指令都執行過後，才會接者顯示網頁內的其他元素，而如果你的.js檔跟顯示網頁沒有直接關係，那就沒有理由讓使用者等到執行完才能瀏覽你的網站。
<script src="script.js"></script>
<form enctype="text/plain" accept-charset="utf-8">
//我們用一個form標籤建立一個可以內含讓使用者輸入資訊的板塊
<!-- 寄件者姓名 -->
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h2 style="font-size: 20; font-weight: 600; margin-bottom: 20; color: grey;">寄信給作者</h2>
<input class="input-bar" id="nameText" type="text" name="Name" value size="60" placeholder=" 姓名(name)" >
// placeholder中輸入還沒有輸入內容時，預設會顯示的文字
<!-- 寄件者email -->
<input class="input-bar" id="emailText" type="email" name="Email" value size="60" placeholder=" Email" >
<!-- 寄件者電話 -->
<input class="input-bar" id="telText"type="tel" name="Phone" value size="60" placeholder=" 電話(phone)" >
<!-- 郵件主旨 -->
<input class="input-bar" id="subText" type="text" name="Subject" value size="60" placeholder=" 主旨(subject)" >
<!-- 郵件內容 -->
<textarea class="input-bar" id="bodyText" name="your-message" cols="40" rows="10" aria-required="true" placeholder=" 你的訊息(Your Message)" ></textarea>
<!-- 傳送按鈕 -->
<div>
<input class="btn" type="button" value="送出訊息" onclick="submitHandler();"
style="
font-family: 'OPEN SANS';
font-weight: 600;
font-size: 18px;
margin-top: 40;">
<a id="mailTo" ></a>
//這裡首先是一個按鈕在按下時，會呼叫submitHandler()這個函數。而這個a標籤是一個我們用來借用超連結指令進行信件發送的媒介，細節我們會在.js檔案裏面介紹
</div>
</div>
</div>
</div>
</form>
//按下傳送按鈕後執行
function submitHandler(){
var to = "xxx@gmail.com";
//寫死的傳送對象 就是要傳送的信箱，不會顯示在網頁上
var subject = subText.value;
//讀取ID為 subText物件中的值，我們在上方的input物件已經先設好這個id了
//把user填的資料都塞到 mail body 中
var body = ""+'%0A%0A%0A';
//%0A是換行 換了三行
body += "From："+nameText.value+'%0A';
body += "Email："+emailText.value+'%0A';
body += "Tel："+telText.value;
//傳送的主要程式碼
mailTo.href="mailto:"+to+"?subject="+subject+"&body="+body;
mailTo.click();
//這裡我們藉由將先宣告的a標籤超連結地址改為”mailto:”，瀏覽器就會幫我們打開信箱的預設應用程式，並把所有使用者輸入好的資訊帶進去，接著我們讓a標籤觸發click()，以此觸發這個超連結
}
其實嚴格來說，寄送信件這個功能已經不太算是靜態網站的範疇了，但也不是個複雜的功能，就不用太計較了XDD。至此我們已經大致完成這個網頁了，剩下的問題只有要怎麼讓網路上的其他人也可以看到它，這件事情我們會在下一篇內完成，那麼我們就下次再見啦～
從零開始用github架設靜態網站入門(1) - 介紹&環境搭建
從零開始用github架設靜態網站入門(2) - HTML & Bootstrap
從零開始用github架設靜態網站入門(3) - CSS客製化
從零開始用github架設靜態網站入門(4) - 其他小功能製作
從零開始用github架設靜態網站入門(5) - 部署到Github Pages
iThome鐵人賽
看影片追技術